<template>
    <div>
        <div class="textarea-ipt">
            <el-input class="ipt" :disabled="!userInfo.ID" :placeholder="placeholder" v-model="inputValue" clearable>
            </el-input>
            <el-button type="primary" @click="submitComment" :disabled="!userInfo.ID">{{ btnText }}</el-button>
        </div>
    </div>
</template>
<script>
import { showToast, getCookies } from '../../utils/index';
import request from '../../request/request';
export default {
    props: {
        isReply: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        replyInfo: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            inputValue: '',
            placeholder: '请输入评论内容',
            btnText: '发布',
            userInfo: {
                ID: ''
            }
        }
    },
    watch: {
        isReply: {
            handler(val) {
                if (val) {
                    this.placeholder = `回复 ${this.replyInfo.username} : ${this.replyInfo.content}`
                    this.btnText = `回复 ${this.replyInfo.username}`
                }
            },
            immediate: true
        }
    },
    mounted() {
        this.getLoginInfo();
    },
    methods: {
        async getLoginInfo() {
            let userInfo = await this.$store.dispatch('user/getUserInfo')
            if (!userInfo.isLogin) {
                this.placeholder = `您还没有登录~登录后再发表评论`
                return;
            };
            this.userInfo = userInfo.userInfo;
        },
        submitComment() {
            if (!this.inputValue) {
                showToast({
                    msg: "请输入评论内容",
                    type: "warning"
                })
                return
            }
            let data = {
                content: this.inputValue,
                articleId: this.$route.params.id,
            }
            if (this.isReply) {
                data.replyId = this.replyInfo.ID
            }
            request({
                url: '/api/comment/addComment',
                method: 'post',
                data: data,
                success: res => {
                    if (res.code === 200) {
                        this.$emit('submitSuccess')
                        this.inputValue = '';
                        showToast({
                            msg: "评论成功",
                            type: "success"
                        })
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.textarea-ipt {
    margin-top: 20px;
    display: flex;

    .ipt {
        margin-right: 10px;

        :deep .el-input__inner {
            border-radius: 50px;
        }
    }

    @media screen and (max-width: 768px) {
        .ipt {
            :deep .el-input__inner {
                border-radius: 5px;
            }
        }
    }

    :deep .el-button--primary {
        border-radius: 50px;
    }

    @media screen and (max-width: 768px) {
        :deep .el-button--primary {
            border-radius: 5px;
            width: 60px;
            text-align: center;
            padding: 0;
        }
    }
}
</style>
